<script setup>
import "../iconfont/WorkStation/Return/iconfont.css"
import {ref} from "vue";

function goBack(){
  window.history.back();
}

let selectArea = ref();
let operationArea = ref();
let isPreview = ref(false);

function preview() {
  if (!isPreview.value) {
    selectArea.value.style.display = 'none';
    operationArea.value.style.display = 'none';
  }else {
    selectArea.value.style.display = 'block';
    operationArea.value.style.display = 'block';
  }
  isPreview.value = !isPreview.value;
}

</script>

<template>
  <!--导航栏-->
  <div ref="workStation-navBar" class="workStation-navBar">
    <!--    上半部分功能-->
    <div style="display: flex;margin-top: 20px">
      <!--    返回键-->
      <i class="iconfont icon-fanhui1" @click="goBack"></i>
      <!--    文件名称-->
      <span>文件名称</span>
      <!--头像-->
      <div ref="workStation-navBar-avatar" class="workStation-navBar-avatar"></div>
    </div>
    <!--    下半部分功能-->
    <div style="display: flex;margin-top: 10px">
      <!--      全部移除-->
      <div class="workStation-navBar-box workStation-navBar-removeAll ">移除全部</div>
      <!--      预览按钮-->
      <div class="workStation-navBar-box workStation-navBar-preview " @click="preview" v-if="!isPreview">预览</div>
      <div class="workStation-navBar-box workStation-navBar-preview " @click="preview" v-else>取消预览</div>
      <!--      生成按钮-->
      <div class="workStation-navBar-box workStation-navBar-generate ">生成</div>
    </div>
  </div>

  <!--  操作区域-->
  <div ref="workStation-operationArea" class="workStation-operationArea">

    <!--    选择区域-->
    <div ref="selectArea" class="selectArea">

      <!--      选择区域-->
      <div class="selectArea-content">
        <p v-for="i in 55">{{ i }}</p>
      </div>

    </div>

    <!--    排版区域-->
    <div ref="layoutArea" class="layoutArea"></div>

    <!--    详细操作-->
    <div ref="operationArea" class="operationArea">
      <div class="operationArea-content">
        <p v-for="i in 55">{{ i }}</p>
      </div>
    </div>


  </div>
</template>

<style scoped>
.workStation-navBar {
  height: 80px;
  border-bottom: 1px rgb(233, 234, 236) solid;
  border-radius: 8px;
  box-shadow: 0 3px 5px -2px rgb(233, 234, 236);
}

.icon-fanhui1 {
  font-size: 18px;
  padding-right: 20px;
}

.workStation-navBar-avatar {
  width: 24px;
  height: 24px;
  background-color: #222222;
  margin-left: 1480px;
}

.workStation-navBar-box {
  width: 51.2px;
  height: 32px;
  font-size: 12px;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
}

.workStation-navBar-removeAll {
  margin-left: 1400px;
  border: 1px #FF461F solid;
  color: #FF461F;
}

.workStation-navBar-preview {
  border: 1px rgb(0, 184, 153) solid;
  color: rgb(0, 184, 153);
  margin-left: 15px;
}

.workStation-navBar-generate {
  background-color: rgb(0, 184, 153);
  color: white;
  margin-left: 15px;
}


.workStation-operationArea {
  display: flex;
}

.selectArea {
  height: 770px;
  width: 300px;
  border: 1px solid #ccc;
}

.selectArea-content {
  height: 770px;
  overflow-y: auto;
}

::v-deep .selectArea-content::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}

::v-deep .selectArea-content::-webkit-scrollbar-track {
  background: #f5f5f5; /* 轨道背景 */
  border-radius: 3px;
}

::v-deep .selectArea-content::-webkit-scrollbar-thumb {
  background: #ccc; /* 滑块颜色 */
  border-radius: 3px; /* 滑块圆角 */
}

::v-deep .selectArea-content::-webkit-scrollbar-thumb:hover {
  background: #999; /*  hover状态颜色 */
}

.layoutArea {
  flex: 1;
  border: 1px solid #ccc;
  border-left: none; /* 去除相邻边框重复 */
}


.operationArea {
  height: 770px;
  width: 300px;
  border: 1px solid #ccc;
  direction: rtl;
}

.operationArea-content {
  height: 770px;
  overflow-y: auto;
}

::v-deep .operationArea-content::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}

::v-deep .operationArea-content::-webkit-scrollbar-track {
  background: #f5f5f5; /* 轨道背景 */
  border-radius: 3px;
}

::v-deep .operationArea-content::-webkit-scrollbar-thumb {
  background: #ccc; /* 滑块颜色 */
  border-radius: 3px; /* 滑块圆角 */
}

::v-deep .operationArea-content::-webkit-scrollbar-thumb:hover {
  background: #999; /*  hover状态颜色 */
}

</style>
